<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <base target="_blank" />
    <meta charset="UTF-8">
    <title>基金列表</title>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script type="text/javascript" src="/js/jquery-2.1.4.min.js"></script>
    <script src="/js/vue.min.js" type="text/javascript"></script>
    <script src="/js/axios.min.js" type="text/javascript"></script>
</head>
<body>
<div id="app">
    <h3>基金列表</h3>
    <table>
        <tr>
            <td>基金名称</td>
            <td>基金代码</td>
            <td>操作按钮</td>
        </tr>
        <tr v-for="fund in funds">
            <td>{{fund.fundName}}</td>
            <td>{{fund.fundCode}}</td>
            <td><input type="button" value="详情" @click.prevent="detail('fundCode',fund.fundCode,365)"></td>
            <!--vue中通过函数传参数,解析接口传给函数参数-->
        </tr>
    </table>

    <h3>新闻列表</h3>
    <div>
        <input id="date" type="text" placeholder="请输入日期yyyy-MM-dd">
    </div>
    <div>
        <input type="button" value="查询新闻" @click.prevent="searchNews()">
    </div>

    <table>
        <tr>
            <td>标题</td>
            <td>链接</td>
            <td>时间</td>
        </tr>
        <tr v-for="info in news">
            <td>{{info.title}}</td>
            <td  @click.prevent="openDetail(info.detailLink)"><{{info.detailLink}}</td>
            <td>{{info.newsTime}}</td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            funds:[],
            msg:"hello",
            news:[]
        },
        mounted:function () {
            // this.getFunds();
            this.getNews();
        },
        methods: {
            searchNews() {
                let date = $("#date").val();
                let _this = this;
                $.ajax({
                    url:'http://127.0.0.1:9527/blog/api/es/search/news',
                    type:'post',
                    data: {date:date},
                    success:function(response){
                        console.info(response);
                        _this.news = response.data;
                    }
                });
            },
            openDetail(url){
                window.open(url,'_blank');
            },
            getNews(){
                let _this = this;
                $.ajax({
                    url:'http://127.0.0.1:9527/blog/api/es/search/news',
                    type:'post',
                    data: {date:"2022-07-27"},
                    success:function(response){
                        console.info(response);
                        _this.news = response.data;
                    }
                });
            },
            getFunds(){
                var _this = this;
                axios.post('http://127.0.0.1:8081/fund/analysise/fund-list', {})
                    .then(function (response) {
                        _this.funds = response.data.data;
                        console.log(this.funds);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            detail(cname,cvalue,exdays){
                this.setCookie(cname,cvalue,exdays);
                window.location.href="fundAnalysise.html";
            },
            setCookie(cname,cvalue,exdays){
                var d = new Date();
                d.setTime(d.getTime()+(exdays*24*60*60*1000));
                var expires = "expires="+d.toGMTString();
                document.cookie = cname + "=" + cvalue + "; " + expires;
                console.info(this.getCookie("fundCode"));
            },
            getCookie(cname){
                var name = cname + "=";
                var ca = document.cookie.split(';');
                for(var i=0; i<ca.length; i++)
                {
                    var c = ca[i].trim();
                    if (c.indexOf(name)==0) return c.substring(name.length,c.length);
                }
                return "";
            },
            checkCookie(){
                var username=getCookie("username");
                if (username!="")
                {
                    alert("Welcome again " + username);
                }
                else
                {
                    username = prompt("Please enter your name:","");
                    if (username!="" && username!=null)
                    {
                        setCookie("username",username,365);
                    }
                }
            }
        }
    });
</script>
</body>
</html>

<!--vue中通过函数传参数,解析接口传给函数参数-->

<!--一，通过点击事件本身的js特性传参。

<view class="center_menu">
				<view class="menu_item" v-for="item in menus" @click="toAddress(item.address)">
					<image :src="item.icon" mode="aspectFill" ></image>
					<text>{{item.name}}</text>
				</view>
			</view>
将所需要的参数直接@click=“toAddress(item.address)”，放在函数的括号内传递。接受的时候如下：

methods: {
			toAddress (e){
				console.log(e);
			}
		},

二，通过自定义属性传参，我经常用这种。

<view class="order_status">
					<view class="status" v-for="item in status" @click="toAddress" data-id="1">
						<image class="icon" :src="item.url" mode="aspectFill"></image>
						<text>{{item.name}}</text>
					</view>
				</view>

通过自定义属性data-id将字符串“1”传递过去。(这种方法小程序上经常使用)接受的时候如下：

methods: {
			toAddress (e){
				console.log(e.currentTarget.dataset.id);
			}
		},

三，将事件本身传递过去。

<view class="order_status">
					<view class="status" v-for="item in status" @click="toAddress($event)" data-id="1">
						<image class="icon" :src="item.url" mode="aspectFill"></image>
						<text>{{item.name}}</text>
					</view>
				</view>

methods: {
			toAddress (e){
				console.log(e);
			}
		},
————————————————
版权声明：本文为CSDN博主「前端小问题」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43989837/article/details/104941158-->